<template>
  <div>
    <div class="header">
      <div class="hd_left">
        <span class="return" @click="$router.back()">
          <i class="el-icon-back" style="font-size:18px" />
          <span style="margin-left:5px">返回</span>
        </span>
        <span style="margin-left:10px">查看企业</span>
      </div>
      <div class="hd_right">
        黑马管理员
      </div>
    </div>
    <div class="main">
      <el-card>
        <template #header>
          <span>企业信息</span>
        </template>
        <el-row>
          <el-form ref="formRef" label-width="100px" :model="enterPriseInfo">
            <el-col :span="12">
              <el-form-item label="企业名称:">
                <el-input v-model="enterPriseInfo.name" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人:">
                <el-input v-model="enterPriseInfo.legalPerson" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册地址:">
                <el-input v-model="enterPriseInfo.registeredAddress" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在行业:">
                <el-select v-model="enterPriseInfo.industryCode" disabled>
                  <el-option v-for="item in industry" :key="item.industryCode" :value="item.industryCode" :label="item.industryName" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业执照:">
                <!-- 图片 -->
                <img :src="enterPriseInfo.businessLicenseUrl" alt="" style="width:200px">
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>

      <el-card style="margin-top:20px">
        <template #header>
          <span>联系人信息</span>
        </template>
        <el-row>
          <el-form ref="formRef2" :model="enterPriseInfo">
            <el-col :span="12">
              <el-form-item label="企业联系人">
                <el-input v-model="enterPriseInfo.contact" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业联系电话">
                <el-input v-model="enterPriseInfo.contactNumber" disabled />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>

      <el-card style="margin-top:20px">
        <template #header>
          <span>租赁记录</span>
        </template>
        <el-table :data="rent" border>
          <el-table-column label="序号" type="index" width="80px" />
          <el-table-column label="租赁楼宇" prop="name" width="100px" />
          <el-table-column label="合同状态" prop="status" width="100px">
            <template #default="scope">
              <span v-if="scope.row.status===0">待生效</span>
              <span v-else-if="scope.row.status===1">生效中</span>
              <span v-else-if="scope.row.status===2">已到期</span>
              <span v-else>已退租</span>
            </template>
          </el-table-column>
          <el-table-column label="租赁起止时间">
            <template #default="scope">
              {{ scope.row.startTime }}
              <span>至</span>
              {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="租赁合同">
            <template #default="scope">
              <el-button type="text">{{ scope.row.contractName }}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="createTime" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" @click="downFile(scope.row.contractId)">合同下载</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

  </div>
</template>

<script>
import { getIndustry, watchInfo } from '@/api/enterprise'
import { downFile } from '@/api/upload'
export default {
  data() {
    return {
      // 所属机构
      industry: [],
      enterPriseInfo: {
        name: '',
        legalPerson: '',
        registeredAddress: '',
        industryCode: null,
        contact: '',
        contactNumber: '',
        businessLicenseUrl: '',
        businessLicenseId: null
      },
      rent: []

    }
  },
  async created() {
    await this.watchInfo()
  },
  methods: {

    // 获取企业信息,查看企业信息来获取
    async watchInfo() {
      // 路由传参
      const id = this.$route.params.id
      const res = await watchInfo(id)
      console.log(res.data)
      this.enterPriseInfo = res.data.data
      this.rent = res.data.data.rent
      console.log(this.rent)
    },
    // 获取企业所属机构
    async getIndustry() {
      const res = await getIndustry()
      console.log(res.data)
      this.industry = res.data.data
    },
    // 下载文件
    async downFile(id) {
      const contractId = String(id)
      const res = await downFile(contractId)
      console.log(res)
    }

  }
}
</script>

<style lang="scss" scoped>

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    color: black;
    font-weight: 700;
    background-color: #fff;
    padding: 0 20px;
    .return{
        cursor: pointer;
        padding: 0 10px;
        border-right: 1px solid rgb(241, 241, 241);
    }
}
.main{
    width: 100%;
    height: 83vh;
    padding: 20px 130px;
    background-color: #f4f6f8;
    overflow: auto;
}
::v-deep .el-card__body{
    padding: 20px 60px;
}
::v-deep .el-input{
    width: 400px;
}
.footer{
    height:10vh;
    line-height: 10vh;
    text-align: center;
    background-color: #fff;
}
</style>
